<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<% response.setContentType("text/html; charset=UTF-8"); 
	request.setCharacterEncoding("UTF-8");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/overlay.css" />
<link rel="stylesheet" type="text/css" href="resources/css/mask.css" />
<link rel="stylesheet" type="text/css" href="resources/css/standalone.css" />
<link rel="stylesheet" type="text/css" href="resources/css/navigation.css" />
<link rel="stylesheet" type="text/css" href="resources/css/pptplayer.css" />
<link rel="stylesheet" type="text/css" href="resources/css/videoplayer.css" />
<link rel="stylesheet" type="text/css" href="resources/css/warning.css" />
<title>Home</title>
</head>
<body>
	<jsp:include page="header.inc.jsp"></jsp:include>
	<div id="panes">
		<jsp:include page="videoPane.inc.jsp"></jsp:include>
		<jsp:include page="pptPane.inc.jsp"></jsp:include>
		<jsp:include page="picturePane.inc.jsp"></jsp:include>
		<jsp:include page="cameraPane.inc.jsp"></jsp:include>
	</div>
	<!-- navigator -->
	<div id="nav">
		<ul>
			<li><a id="<c:out value="${ statusBean.videoNav.id }" />" href="#"> 
				<img src="resources/img/home/video.png" /> 
				<strong><c:out value="${ labelBean.videoLabel }" /></strong>
			</a></li>
			<li><a id="<c:out value="${ statusBean.pptNav.id }" />" href="#"> 
				<img src="resources/img/home/ppt.png" /> 
				<strong><c:out value="${ labelBean.pptLabel }" /></strong>
			</a></li>
			<li><a id="<c:out value="${ statusBean.pictureNav.id }" />" href="#"> 
				<img src="resources/img/home/picture.png" /> 
				<strong><c:out value="${ labelBean.pictureLabel }" /></strong>
			</a></li>
			<li><a id="<c:out value="${ statusBean.cameraNav.id }" />" href="#"> 
				<img src="resources/img/home/camera.png" /> 
				<strong><c:out value="${ labelBean.cameraLabel }" /></strong>
			</a></li>
		</ul>
	</div>

	<jsp:include page="videoOverlay.inc.jsp"></jsp:include>
	<jsp:include page="pptOverlay.inc.jsp"></jsp:include>
	<jsp:include page="pictureOverlay.inc.jsp"></jsp:include>
	<jsp:include page="cameraOverlay.inc.jsp"></jsp:include>


	<div id="mask"></div>

	<input type="hidden" id="currentNav"
		value="<c:out value="${ statusBean.videoNav.id }" />" />
	<input type="hidden" id="controllerOn" value=false />
	<input type="hidden" id="videoPaused" value=false />

	<input type="hidden" id="videoNavId" value="<c:out value="${ statusBean.videoNav.id }" />" />
	<input type="hidden" id="pptNavId" value="<c:out value="${ statusBean.pptNav.id }" />" />
	<input type="hidden" id="pictureNavId" value="<c:out value="${ statusBean.pictureNav.id }" />" />
	<input type="hidden" id="cameraNavId" value="<c:out value="${ statusBean.cameraNav.id }" />" />

	<div id="warning"><c:out value="${ labelBean.warningLabel }" /></div>
	<jsp:include page="footer.inc.jsp"></jsp:include>
	<script type="text/javascript">
		function update(currentNav, controllerOn, isCurrentNav) {

			$("#nav ul li a").removeClass("current");
			$("#" + currentNav).addClass("current");
			if (!isCurrentNav) {
				$("#panes div").fadeOut(1000);
			}
			if (currentNav == $("#videoNavId").attr("value")) {
				$("#videoNavPane").fadeIn(1000);
			} else if (currentNav == $("#pptNavId").attr("value")) {
				$("#pptNavPane").fadeIn(1000);
			} else if (currentNav == $("#pictureNavId").attr("value")) {
				$("#pictureNavPane").fadeIn(1000);
			} else if (currentNav == $("#cameraNavId").attr("value")) {
				$("#cameraNavPane").fadeIn(1000);
			}

			if (controllerOn) {
				$("#mask").fadeIn(1000);
				if (currentNav == $("#videoNavId").attr("value")) {
					if(!$("#videoController").overlay({api : true}).isOpened()){
						$("#videoController").overlay({
							api : true
						}).load();
					}
					if($("#videoPaused").attr("value") == "true"){
						$("#videoplayer_pause").fadeOut(500);
						$("#videoplayer_pause_disable").fadeIn(500);
						$("#videoplayer_play").fadeIn(500);
						$("#videoplayer_play_disable").fadeOut(500);
					}else{
						$("#videoplayer_play").fadeOut(500);
						$("#videoplayer_play_disable").fadeIn(500);
						$("#videoplayer_pause").fadeIn(500);
						$("#videoplayer_pause_disable").fadeOut(500);
					}
				} else if (currentNav == $("#pptNavId").attr("value") && !$("#pptController").overlay({api : true}).isOpened()) {
					$("#pptController").overlay({
						api : true
					}).load();
				} else if (currentNav == $("#pictureNavId").attr("value") && !$("#pictureController").overlay({api : true}).isOpened()) {
					$("#pictureController").overlay({
						api : true
					}).load();
				} else if (currentNav == $("#cameraNavId").attr("value") && !$("#cameraController").overlay({api : true}).isOpened()) {
					$("#cameraController").overlay({
						api : true
					}).load();
				}
			} else {
				$(".apple_overlay").overlay({api:true}).close();
				$("#mask").fadeOut(1000);
			} 
		}

		function updateStatus() {
			$.post("statusUpdate", function(data) {
				var b = data.currentNav == $("#currentNav").attr("value");
				if (data.currentNav == $("#currentNav").attr("value") && data.controllerOn == $("controllerOn").attr("value")) {
					return;
				}

				$("#currentNav").attr("value", data.currentNav);
				$("#controllerOn").attr("value", data.controllerOn);
				$("#videoPaused").attr("value", data.videoPaused);
				update(data.currentNav, data.controllerOn, b);
			}, "json");
		}

		function command(_changeNavTo, _changeControllerTo, _commands, _param) {
			$.post("command", {
				currentNav : $("#currentNav").attr("value"),
				controllerOn : $("#controllerOn").attr("value"),
				changeNavTo : _changeNavTo,
				changeControllerTo : _changeControllerTo,
				commands : _commands,
				param : _param
			}, function(data) {
				if (data.succeed) {
					var b = data.currentNav == $("#currentNav").attr("value");
					$("#currentNav").attr("value", data.currentNav);
					$("#controllerOn").attr("value", data.controllerOn);
					$("#videoPaused").attr("value", data.videoPaused);
					update(data.currentNav, data.controllerOn, b);
					return;
				}
				$("#warning").css("width", $("#panes").css("width"));
				$("#warning").fadeIn(1000);
				$("#warning").fadeOut(1000);
				updateStatus();
			}, "json");
		}

		$(function() {
			$("img[rel]").overlay({
				mask : '#000',
				effect : 'apple',
				onBeforeLoad:function(){
					return false;
				}
			});
			$("img[rel]").click(function() {
				if($("#currentNav").attr("value") == $("#pptNavId").attr("value")){
					command($("#currentNav").attr("value"), true, "ppt_open", $(this).attr("id"));
				}else if($("#currentNav").attr("value") == $("#videoNavId").attr("value")){
					command($("#currentNav").attr("value"), true, "video_open", $(this).attr("id"));
				}else if($("#currentNav").attr("value") == $("#pictureNavId").attr("value")){
					command($("#currentNav").attr("value"), true, "picture_open", $(this).attr("id"));
				}else if($("#currentNav").attr("value") == $("#cameraNavId").attr("value")){
					command($("#currentNav").attr("value"), true, "camera_open", $(this).attr("id"));
				}
			});
			$("#nav ul").tabs("#panes > div", {
				effect : 'fade',
				fadeOutSpeed : 400,
				onBeforeClick : function(index) {
					return false;
				}
			});
			$("#nav ul li a").click(function() {
				command($(this).attr("id"), false, "", "");
			});
			$(".close").click(function() {
				command($("#currentNav").attr("value"), false, "close", "");
			});
			
			$("#mask").css("width", $(window).width());
			$("#mask").css("height", $(window).height());
			$("#mask").css("position", "fixed");
			updateStatus();
			
			$("#pptplayer_previous").click(function(){
				command($("#currentNav").attr("value"), true, "ppt_previous", "");
			});
			$("#pptplayer_next").click(function(){
				command($("#currentNav").attr("value"), true, "ppt_next", "");
			});
			
			$("#videoplayer_pause").click(function(){
				command($("#currentNav").attr("value"), true, "video_pause", "");
			});
			$("#videoplayer_play").click(function(){
				command($("#currentNav").attr("value"), true, "video_play", "");
			});
			$("#videoplayer_volumn_down").click(function(){
				command($("#currentNav").attr("value"), true, "video_volumn_down", "");
			});
			$("#videoplayer_volumn_up").click(function(){
				command($("#currentNav").attr("value"), true, "video_volumn_up", "");
			});

			$("#picture_previous").click(function(){
				command($("#currentNav").attr("value"), true, "picture_previous", "");
			});
			$("#picture_next").click(function(){
				command($("#currentNav").attr("value"), true, "picture_next", "");
			});
			
		});
	</script>
</body>
</html>